import type { App, Directive, DirectiveBinding } from "vue";

function loadmore(el: Element, binding: DirectiveBinding) {
  const SELECTWRAP_DOM = el;
  SELECTWRAP_DOM.addEventListener("scroll", function () {
    const condition =
      SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <=
      SELECTWRAP_DOM.clientHeight;
    if (condition) {
      binding.value();
    }
  });
}

const mounted = (el: Element, binding: DirectiveBinding<any>) => {
  loadmore(el, binding);
};

const loadmoreDirective: Directive = {
  mounted,
};

export const setuploadmoressionDirective = (app: App<Element>) => {
  app.directive("loadmore", loadmoreDirective);
};

export default loadmoreDirective;